<script setup>
import { computed, reactive, ref } from 'vue'
import passwordComp from '@/pages/login/components/passwordComp.vue';
import phoneComp from '@/pages/login/components/phoneComp.vue';
	const title=reactive([
		 {one:'密码登录',two:'验证码登录'},
		 {one:'验证码登录',two:'密码登录'}
	 ])
 // 相当于title索引
 const actionID=ref(1)
 const titleView=computed(()=>title[actionID.value])
 const onchange=()=>{
 	// 0-1=-1 然后abs绝对值就是1 这样就切换了 然后如果是1 就是 1-1=0
 	actionID.value = Math.abs(actionID.value-1)
 }
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{titleView.one}}</view>
      <view class="type" @click="onchange">
        <text>{{titleView.two}}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
  
  <passwordComp v-if="actionID==0"></passwordComp>
  <phoneComp v-if="actionID==1"></phoneComp>
  
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</view>	
</template>

<style lang="scss">
	@import './login.scss'
</style>

